<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"

      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">

    <body>

        <ui:composition template="./master/MasterPage.xhtml">

            <ui:define name="content">

                <!-- Page Content -->
                <div class="container">
                    <ol class="breadcrumb" style="border-left: 3px solid #e54e53;">
                        <li><a>Upcoming events</a></li>
                    </ol>
                </div>
                <div class="container">
                    <div style="height: 400px;width: 1140px;border-radius: 3px; margin: auto;border: 0px solid black;background-image:url('#{eventLibraryController.upcomingEvent.image}');margin-bottom: 20px;background-repeat: repeat-x;">
                        <p style="margin-left: -11px;margin-top: -11px; width: 30px;z-index: 999;">
                            <c:if test="#{eventLibraryController.upcomingEvent.type =='new'}">
                                <i class="fa fa-bell fa-4x fa-fw" style="color: red ;"></i>
                            </c:if> <i  class="fa fa-bookmark fa-3x fa-fw" style="color: red ;"></i></p>
                        <div class="eventhead" style="text-align: right;">
                            <p style="text-align: left;">#{eventLibraryController.upcomingEvent.description}</p>
                            <a>Time start :#{eventLibraryController.upcomingEvent.timeStart}</a><br/>
                            <a>Time end :#{eventLibraryController.upcomingEvent.timeEnd}</a>
                        </div>
                        <div class="eventcontent"></div>
                        <div class="eventfooter">
                            <ul class="nav nav-pills" style="margin-top: 30px;">
                                <li >
                                    <a  style="height: 40px;color: #b84d45;" class="invite">
                                        Invite
                                        
                                    </a>
                                </li>
                                <li ><a href="#">Joined count<span class="badge">#{eventLibraryController.upcomingEvent.joinedCount}</span></a></li>

                                <c:if test="#{eventLibraryController.upcomingEvent.status == 'Join'}">
                                    <li ><a href="#" style="height: 40px;"><h:commandButton  value="Join now" action="#{eventLibraryController.registerEvent(eventLibraryController.upcomingEvent.eventId)}" style="background: rgba(10, 2, 1, 0);border: 0px;"></h:commandButton></a></li>
                                </c:if>
                                <li ><a>Address of Event</a></li>
                                <li><a  href="EventDetail.xhtml?eventId=#{eventLibraryController.upcomingEvent.eventId}">More &rarr;</a></li>
                                <li>
                                    <span class="comments" style="float: right;color: #4cae4c;">
                                <i class="fa fa-comments-o  fa-2x"></i>
                                <a style="color: #4cae4c;"> #{eventLibraryController.upcomingEvent.commnetCount}</a>
                            </span>
                                </li>
                            </ul>
                            	
                            
                        </div>

                    </div>

                    <div class="row previews">
                        <div class="container">
                            <ol class="breadcrumb" style="border-left: 3px solid #e54e53;">
                                <li><a>New Events</a></li>
                            </ol>
                        </div>
                        <c:choose>
                            <c:when test="#{eventLibraryController.eventLibrary !=null}">
                                <c:forEach var="ev" items="#{eventLibraryController.eventLibrary}">
                                    <h:form>
                                        <div class="col-lg-4 col-sm-6">
                                            <div class="thumbnail" style="text-align: left;background-image:url('#{ev.image}');background-size:600px;background-repeat: no-repeat;">
                                                <div class="tranbox">

                                                    <div class="caption">
                                                        <!--                                                        <c:if test="{ev.type =='new'}">
                                                                                                                    <i class="fa fa-bell fa-2x fa-fw" style="color: red ;"></i>
                                                                                                                </c:if>-->
                                                        <ul class="nav nav-pills">

                                                            <li class="active"><a href="#">Joined count<span class="badge">#{ev.joinedCount}</span></a></li>

                                                            <c:if test="#{ev.status == 'Join'}">
                                                                <li class="active"><a href="#" style="height: 40px;"><h:commandButton  value="Join now" action="#{eventLibraryController.registerEvent(ev.eventId)}" style="background: #b84d45;border: 0px;"></h:commandButton></a></li>
                                                            </c:if>
                                                        </ul>
                                                        <h3>#{ev.name}</h3>
                                                        <p>#{ev.description}</p>
                                                        <a>#{ev.timeStart}</a><br/><a>#{ev.timeEnd}</a><br/><br/>
                                                        <a class="btn btn-default" href="EventDetail.xhtml?eventId=#{ev.eventId}">More »</a>

                                                        <span class="comments" style="float: right;color: #4cae4c;">
                                                            <i class="fa fa-comments-o  fa-2x"></i>
                                                            #{ev.commnetCount}
                                                        </span>	
                                                    </div>
                                                </div>
                                            </div>
                                        </div>	  
                                    </h:form>

                                </c:forEach>
                            </c:when>
                            <c:otherwise><p>null</p></c:otherwise>
                        </c:choose>
                    </div>

                    <!--<i class="fa fa-flag fa-2x fa-fw invite "></i>-->
                    <c:when test="#{eventLibraryController.liste!=null}">
                        <div class="invitemain" style="display: none;background: white;width: 445px;height: 465px;background: -webkit-linear-gradient(top, rgba(251, 251, 251, 1) 0%, rgba(248, 248, 248, 1) 11%, rgba(240, 240, 240, 1) 100%);border-radius: 3px;box-shadow: 1px 1px 3px 3px rgb(219, 218, 218);border-color: rgb(211, 209, 209); position: fixed;top: 15%;z-index: 9999;margin-left: 25%;">
                            <div class="notificationheader">
                                <div class="fadeout" style="bottom: 0;
                                     left: 0;
                                     position: fixed;
                                     right: 0;
                                     top: 0;background-color: rgba(0, 0, 0, .4);z-index: -60"></div>
                                <div style="float: right"><i class="fa fa-times fa-fw inviteclose" style="color: #ccc;cursor: pointer"></i></div>
                                Invited to attend the event
                            </div>
                            <h:form>
                                <div id="invitemaincontent" style="width: 100%; height: 435px;overflow-y: scroll;overflow-x: hidden;padding-bottom: 10px;background: white;">
                                    <ul>
                                        <li>
                                            <div class="input-group">
                                                <h:inputText id="txtSearch" value=""  class="form-control" style="display: block;width: 250px;"/>
                                                <span class="input-group-btn" style="display: block;">

                                                    <h:commandButton id="btnSearch" class="btn btn-default"  value="Search">
                                                        <f:ajax render="@this" execute="@this"></f:ajax>
                                                    </h:commandButton>
                                                </span>
                                            </div>
                                        </li>

                                        <c:forEach items="#{eventLibraryController.listEmployeeInvited(eventLibraryController.upcomingEvent.eventId)}" var="emp">
                                            <li style="height: 65px;"><img height="50" width="50" src="#{emp.avatar}" /><span style="font-size: 20px;font-weight: bold;margin-right: 200px;">#{emp.username}</span>
                                                <c:if test="#{emp.status=='Invite'}" >
                                                    <h:commandButton value="Invite"  action="#{notificationController.sendInvitedAttendEvent(emp.username,eventLibraryController.upcomingEvent.eventId)}" class="btn btn-default"  >
                                                        <f:ajax render="@this" execute="@this"></f:ajax>
                                                    </h:commandButton>
                                                </c:if>
                                                <c:if test="#{emp.status=='Joined'}" >
                                                    <h:commandButton value="#{emp.status}" action="w" class="btn btn-default" >
                                                    </h:commandButton>
                                                </c:if>
                                            </li>

                                        </c:forEach>

                                    </ul>
                                </div>
                            </h:form>
                        </div>
                    </c:when>
                </div>
                <div id="pagging" style="text-align: center;">
                    <h:form>
                        <ul class="pagination">
                            <c:if test="#{eventLibraryController.currentPages!=1}">
                                <li><a href="Home.xhtml?pages=#{eventLibraryController.pages=eventLibraryController.currentPages-1}">Previous</a></li>
                            </c:if>
                            <c:forEach begin="1" end="#{eventLibraryController.noOfPage}" var="i">
                                <c:choose>
                                    <c:when test="#{eventLibraryController.currentPages eq i}">
                                        <li class="active"><a>#{i}</a></li>
                                    </c:when>
                                    <c:otherwise>
                                        <li><a href="Home.xhtml?pages=#{eventLibraryController.pages=i}">#{i}</a></li>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                            <c:if test="#{eventLibraryController.currentPages lt eventLibraryController.noOfPage}">
                                <li><a href="Home.xhtml?pages=#{eventLibraryController.pages=eventLibraryController.currentPages+1}">Next</a></li>
                            </c:if>
                        </ul>
                    </h:form>
                </div>
            </ui:define>
        </ui:composition>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            $("#btnInvite").click();

        </script>
    </body>
</html>
